iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
2

本來今天要介紹的是驗證授權,但官方那一套我不是很喜歡,所以就從網路上找其他的解決辦法,果不其然就找到了一套,依照Blazor WebAssembly - JWT Authentication Example & Tutorial的思路,簡單的做了一套 JWT 驗證流程,讓我們開始吧!


若要保留登入資料供下次使用,我們需要透過 localStorage 來達成,所以如果你的需求不是如此,便可以省略這一步。

我們先建立一個服務與其介面來處理 localStorage 相關方法:

// ILocalStorageService.cs
public interface ILocalStorageService
{
  Task<T> GetItem<T>(string key);

  Task SetItem<T>(string key, T value);

  Task RemoveItem(string key);
}
// LocalStorageService.cs
public class LocalStorageService : ILocalStorageService
{
  private readonly IJSRuntime _jsRuntime;

  public LocalStorageService(IJSRuntime jsRuntime)
  {
    _jsRuntime = jsRuntime;
  }

  public async Task<T> GetItem<T>(string key)
  {
    var json = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);

    if (json == null)
      return default;

    return JsonSerializer.Deserialize<T>(json);
  }

  public async Task SetItem<T>(string key, T value)
  {
    await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, JsonSerializer.Serialize(value));
  }

  public async Task RemoveItem(string key)
  {
    await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
  }
}

因為 windows 物件本身就包含 localStorage 的處理,所以不需要特別撰寫 javascript

然後建立驗證服務:

// IAuthService.cs
public interface IAuthService
{
  Task<bool> Check();
}
// AuthService.cs
public class AuthService : IAuthService
{
  private readonly HttpClient _httpClient;
  private readonly ILocalStorageService _localStorageService;

  public AuthService(
  HttpClient httpClient,
  ILocalStorageService localStorageService
  )
  {
    _httpClient = httpClient;
    _localStorageService = localStorageService;
  }

  public async Task<bool> Check()
  {
    var request = new HttpRequestMessage(HttpMethod.Get, "/auth");

    var token = await _localStorageService.GetItem<string>("token");

    if (token is null)
    {
      return false;
    }

    request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);

    using var response = await _httpClient.SendAsync(request);

    if (response.StatusCode == HttpStatusCode.Unauthorized)
    {
      return false;
    }

    return true;
  }
}

執行此驗證方法,會從 localStorage 取得 token 並添加到 header 中然後透過 HTTP 方法 get 呼叫 /auth 的 api,若 localStorage 中找不到 token 或者 HTTP 回應的狀態碼為 401 則回傳 false,反之為 true

但此時並沒有串接任何一個 API,所以需要建立一個假的 HttpClientHandler 來做測試,透過繼承 HttpClientHandler,並覆寫其 SendAsync 方法:

// FakeHttpClientHandler.cs
public class FakeHttpClientHandler : HttpClientHandler
{
  protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
  {
    if (request.RequestUri.AbsolutePath == "/auth" && request.Method == HttpMethod.Get)
    {
      return new HttpResponseMessage
      {
        StatusCode = HttpStatusCode.OK
      };
    }
    else
    {
      return await base.SendAsync(request, cancellationToken);
    }
  }
}

這樣一來只要呼叫 HttpClient.SendAsync 時 HTTP 方法為 get 且位置為 /auth,就會無條件返回成功。

最後記得將上面的服務註冊到 DI Container 如:

builder.Services.AddScoped(sp => new HttpClient(new FakeHttpClientHandler()) { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) })
                .AddScoped<ILocalStorageService, LocalStorageService>()
                .AddScoped<IAuthService, AuthService>();

基本的驗證流程就完成了,只要有元件呼叫 IAuthService.Check 方法,就會檢查 token 是否存在且有效。

這邊提供測試用的 Component:

@page "/day26sample"
@inject ILocalStorageService LocalStorageService;
<h3>Day26Sample</h3>
<button @onclick="SetUser">Set Token</button>
<button @onclick="RemoveUser">Remove Token</button>
<NavLink href="/day26authsample">Go Auth</NavLink>
@code {

}

@functions{
    private async Task SetUser()
    {
        await LocalStorageService.SetItem<string>("token", @"blazor30days");
    }


    private async Task RemoveUser()
    {
        await LocalStorageService.RemoveItem("token");
    }
}
@page "/day26authsample"
@inject IAuthService AuthService
@inject NavigationManager Navigation
<h3>Day26AuthSample</h3>
<NavLink href="/day26sample">Go Back</NavLink>

@code {
    protected override async Task OnInitializedAsync()
    {
        if (!await AuthService.Check())
        {
            Navigation.NavigateTo("/day26sample");
        }

        await base.OnInitializedAsync();
    }
}

可以試試看沒有設定 token 的情況下,是無法瀏覽 /day26authsample 頁面的,並會在 OnInitializedAsync 後導向 /day26sample 頁面,若有大量頁面需要做判斷,也可以考慮抽成一個共用驗證元件,透過繼承的方式一次修改所有需要驗證的元件。


以上就是我對於 JWT 驗證的處理方式,本來看到官方的範例想跳過此內容的,但又覺得介紹 blazor 不介紹驗證授權相關的技巧說不過去,所以就衍生出了這一篇,希望能幫助到大家。完整程式碼在範本程式碼 - day26

感謝大家的閱讀,我們明天見。

參考資料
Blazor WebAssembly - JWT Authentication Example & Tutorial


上一篇
環境魔術
下一篇
多國語系魔術
系列文
大內魔術 Blazor - 誰說前端一定要寫JS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言